<template>
  <div class="detail">
    <h1>{{ product.name }}</h1>
    <div class="datail" v-html="product.content"></div>
    <van-goods-action>
      <van-goods-action-icon icon="wap-home" text="主页" @click="onClickHome" />
      <van-goods-action-icon icon="gem" text="列表" @click="onClickIcon" />
      <van-goods-action-icon
        icon="shopping-cart"
        text="购物车"
        @click="onClickCart"
      />
      <van-goods-action-button
        type="danger"
        text="添加购物车"
        @click="onClickButton(product)"
      />
    </van-goods-action>
  </div>
</template>

<script>
// 商品详情
import { loadDataByIdAPI } from "@/services/products";
import { addCartAPI } from "@/services/Cart";
import { getToken } from "@/utils/tools";
import axios from "axios";

export default {
  data() {
    return {
      product: [],
      data: [],
    };
  },
  async created() {
    // console.log(token);
    const res = await loadDataByIdAPI(this.$route.query.id);
    this.product = res.data;
  },
  methods: {
    // 跳转到列表
    onClickIcon() {
      this.$router.push({
        name: "List",
      });
    },
    // 跳转到购物车
    onClickCart() {
      this.$router.push({
        name: "Car",
      });
    },
    // 跳转到 主页
    onClickHome() {
      this.$router.push({
        name: "Home",
      });
    },
    async onClickButton(product) {
      // const istoken = getToken();
      // console.log(istoken);
      // console.log(product);
      const res = await addCartAPI({
        product: product.id,
        amount: 1,
        price: product.price,
      });
      // console.log(res);
      // console.log(res);
      if (res.code == 1) {
        this.data = res.data;
        // Toast.success("成功文案");
        this.$toast("加入购物车成功");
        this.$eventBus.$emit("cartnum");
        this.$router.push({
          name: "Car",
        });
      }
    },
  },
};
</script>

<style></style>
